<template>
	<view>
		<div class="top_search">
			<span>分类</span>
			<div>
				<wd-search placeholder-left cancel-txt=" " />
			</div>
		</div>
	</view>
	  <view class="wraper">
	      <wd-sidebar v-model="active" @change="handleChange">
	        <wd-sidebar-item v-for="(item, index) in categories" :key="index" :value="index" :label="item.label" class="left" />
	      </wd-sidebar>
	      <scroll-view class="content" scroll-y scroll-with-animation :scroll-top="scrollTop" :throttle="false" @scroll="onScroll">
			  <view>
				  <div class="main_img">
					  <wd-swiper :list="swiperList" autoplay v-model:current="current" :indicator="{ type: 'dots-bar' }" ></wd-swiper>
				  </div>
			  </view>
	        <view v-for="(item, index) in categories" :key="index" class="category">
	          <wd-cell-group :title="item.title" border>
	            <wd-cell v-for="(cell, index) in item.items" :key="index" >
						<div class="cell_all"  @click='goShop(cell)'>
							<wd-img :width="90" :height="90" :src="cell.img" />
							<div class="item_p">
								<p>{{cell.name}}</p>
								<span class="span_red">好货上心</span>
								<div>
									<span class="price_sheng">省去{{(cell.price*(1-cell.discount)).toFixed(1)}}</span>
									<span class="limited">限购{{cell.limited}}份</span>
									<div class="price_all"><p class="price">￥{{cell.price}}</p><p class="discount">{{cell.discount*10}}折</p></div>
								</div>
							</div>
						</div>
	            </wd-cell>
	          </wd-cell-group>
	        </view>
	      </scroll-view>
	    </view>
</template>

<script lang="ts" setup>
import { onBeforeMount, onMounted, ref } from 'vue'
import { getRect, isArray } from '../../../../node_modules/wot-design-uni/components/common/util'

let imgUrl = "./static/mine.png"
// 开始的位置
const active = ref<number>(0)
// 进入页面时向下滑动的距离
const scrollTop = ref<number>(0)
const itemScrollTop = ref<number[]>([])
const subCategories = new Array(24).fill({ title: '全体目光向我看齐', label: '这是描述这是描述' }, 0, 24)
let categories = ref([
  {
    label: '时令果蔬',
    title: '标题一',
    items: subCategories
  },
  {
    label: '新鲜蔬菜',
    title: '标题二',
    items: subCategories
  },
  {
    label: '肉禽蛋类',
    title: '标题三',
    items: subCategories.slice(0, 18)
  },
  {
    label: '海鲜水产',
    title: '标题四',
    items: subCategories.slice(0, 21)
  },
  {
    label: '粮油调味',
    title: '标题五',
    items: subCategories
  },
  {
    label: '乳品烘焙',
    title: '标题六',
    items: subCategories.slice(0, 18)
  },
  {
    label: '酒饮冲调',
    title: '标题七',
    items: subCategories
  },
  {
    label: '日用百货',
    title: '标题八',
    items: subCategories
  },
  {
    label: '其他',
    title: '标题九',
    items: subCategories
  }
])

import {useNowShopStore} from "@/store/now_shop"
import {storeToRefs} from 'pinia'
import {shop_search} from '@/utils/api.ts'
const nowShopStore = useNowShopStore()
function  goShop(an:any){
	// console.log(an)
	nowShopStore.setShop(an)
	uni.navigateTo({
	  url: "/pages/TypePages/shop_main/shop_main" // 跳转到对应路径的页面
	});
	
}


onBeforeMount(async()=>{
	
	const {data,type}= await shop_search()
	categories.value = type.map(item=>{
			return {
				label:item.type,
				title:item.type,
				items:data.filter(items=>{
					return items.type.type === item.type
				})
			}
		})
	// console.log(value)
})


onMounted(() => {
  getRect('.category', true).then((rects) => {
    if (isArray(rects)) {
      itemScrollTop.value = rects.map((item) => item.top || 0)
      scrollTop.value = rects[active.value].top || 0
    }
  })
})

function handleChange({ value }) {
	console.log(value)
  active.value = value
  scrollTop.value = itemScrollTop.value[value]
}


function onScroll(e) {
  const { scrollTop } = e.detail
  const threshold = 50 // 下一个标题与顶部的距离
  if (scrollTop < threshold) {
    active.value = 0
    return
  }
  const index = itemScrollTop.value.findIndex((top) => top > scrollTop && top - scrollTop <= threshold)
  if (index > -1) {
    active.value = index
  }
}
// 轮播图
const current = ref<number>(0)
 
const swiperList = ref([
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg'
])
</script>

<style lang="scss">
.cell_all{
	display: flex;
	align-items: center;
	width: 200% !important;
}

.item_p{
	width:40vw;
	// background-color: #ff2558;
	height: 15vh;
	text-align: left;
}
	
.wraper {
 display: flex;
 height: calc(100vh - var(--window-top));
 height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
 height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
}

.content { 
 flex: 1;
 background: #fff;
}
// 控制侧栏颜色和字体
.wd-sidebar-item--active[data-v-9c9938af]{
	color:red !important;
	font-weight: 500 !important;
}
.wd-sidebar-item--active[data-v-9c9938af]::before {
	background-color: red;
}
.left{
	
}
.top_search{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
}
.main_img{
	width: 100%;
}
// 控制轮播图的高度
.uni-swiper-wrapper{
	height: 100px;
}
.wd-swiper__track[data-v-6e972027]{
	height: 100px !important;
}
.span_red{
	color: red;
	padding: 5px;
	font-size: 20rpx;
	background-color: #f7f7f7;
	border-radius: 5px;
}
.price_sheng{
	color: white;
	padding:1rpx 10rpx;
	display: inline-block;
	background-color: #ff8080;
}
.price_all{
	width: 60px;
}
.price{
	color: red;
}
.limited{
	border: 1px solid red;
	padding:1rpx 10rpx;
}
.discount{
	font-size: 20rpx;
	color: #cccccc;
	text-decoration: line-through;
}
</style>
